<template>
  <el-row :gutter="10">
    <el-col :span="5">
      <el-card>
        <OrgTree authority @node-click="handleOrgClick" />
      </el-card>
    </el-col>
    <el-col :span="19">
      <el-card class="layout-query">
        <el-form
          ref="queryRef"
          :inline="true"
          :model="state.queryForm"
          @keyup.enter="getDataList()">
<!--          <el-form-item prop="plateNo">-->
<!--            <el-input v-model="state.queryForm.plateNo" placeholder="车牌号"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item prop="vinNo">-->
<!--            <el-input v-model="state.queryForm.vinNo" placeholder="VIN号"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item prop="engineNo">-->
<!--            <el-input v-model="state.queryForm.engineNo" placeholder="发动机号"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item prop="imei">-->
<!--            <el-input v-model="state.queryForm.imei" placeholder="绑定设备imei"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item prop="key">
            <el-input v-model="state.queryForm.key" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="RefreshRight" @click="reset(queryRef)"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-space>
          <el-space>
            <el-button
              v-auth="'biz:car:save'"
              icon="Plus"
              type="primary"
              @click="addOrUpdateHandle()"
              >新增</el-button
            >
          </el-space>
          <el-space>
            <el-button
                v-auth="'biz:car:save'"
                icon="Plus"
                type="primary"
                @click="openVehicleInfo(undefined)"
            >新增pro</el-button
            >
          </el-space>
          <el-space v-auth="'biz:car:import'">
            <el-upload
              :action="uploadCarExcelUrl"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :show-file-list="false">
              <el-button plain icon="Upload">导入</el-button>
            </el-upload>
          </el-space>
          <el-space>
            <el-button v-auth="'biz:car:export'" plain icon="Download" @click="downloadExcel()"
              >导出</el-button
            >
          </el-space>
          <el-space>
            <el-button
              v-auth="'biz:car:delete'"
              icon="Delete"
              plain
              type="danger"
              @click="deleteBatchHandle()"
              >批量删除</el-button
            >
          </el-space>
          <el-space>
            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="bulkTransfers()"
              >批量转移</el-button
            >
          </el-space>
        </el-space>
        <el-table
          v-loading="state.dataListLoading"
          :data="state.dataList"
          border
          class="layout-table"
          @selection-change="selectionChangeHandle">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"></el-table-column>
          <el-table-column
            prop="sysOrgName"
            label="所属公司/车队"
            header-align="center"
            align="center"
           ></el-table-column>
          <el-table-column
            prop="serialNo"
            label="车编号"
            header-align="center"
            align="center"
            ></el-table-column>
          <el-table-column
            prop="plateNo"
            label="车牌号"
            header-align="center"
            align="center"
            ></el-table-column>
          <el-table-column
            prop="imei"
            label="绑定设备imei"
            header-align="center"
            align="center"
            ></el-table-column>
          <el-table-column
            prop="driverName"
            label="绑定司机"
            header-align="center"
            align="center"
           ></el-table-column>
          <el-table-column
            prop="vinNo"
            label="VIN号"
            header-align="center"
            align="center"
            ></el-table-column>
          <!-- <el-table-column
            prop="brandName"
            label="车品牌"
            header-align="center"
            align="center"
            width="100"></el-table-column> -->
          <!-- <ma-dict-column
            prop="vehicleType"
            label="车挂类型"
            dict-type="vehicle_type"
            header-align="center"
            align="center"
            width="150"></ma-dict-column>
          <ma-dict-column
            prop="carType"
            label="车辆类型"
            dict-type="car_type"
            header-align="center"
            align="center"
            width="150"></ma-dict-column>
          <el-table-column
            prop="engineNo"
            label="发动机号"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <ma-dict-column
            prop="fuelType"
            label="燃料类型"
            dict-type="fuel_type"
            header-align="center"
            align="center"
            width="100"></ma-dict-column>
          <ma-dict-column
            prop="coalType"
            label="运输煤种"
            dict-type="coal_type"
            header-align="center"
            align="center"
            width="100"></ma-dict-column>
          <ma-dict-column
            prop="emissionStandards"
            dict-type="emission_standards"
            label="排放标准"
            header-align="center"
            align="center"
            width="100"></ma-dict-column> -->
          <!-- <el-table-column
            prop="licensePhoto"
            label="行驶证照片"
            header-align="center"
            align="center"
            width="100">
            <template #default="scope">
              <img :src="scope.row.licensePhoto" style="width: 20px; height: 20px" alt="" />
            </template>
          </el-table-column> -->
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            align="center"
            width="150">
            <template #default="scope">
              <el-button
                v-auth="'biz:car:update'"
                type="primary"
                link
                @click="addOrUpdateHandle(scope.row.id)"
                >修改</el-button
              >
              <el-button
                  v-auth="'biz:car:update'"
                  type="primary"
                  link
                  @click="openVehicleInfo(scope.row.imei)"
              >修改pro</el-button
              >
              <el-button
                v-auth="'biz:car:delete'"
                type="primary"
                link
                @click="deleteBatchHandle(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="state.page"
          :page-sizes="state.pageSizes"
          :page-size="state.limit"
          :total="state.total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-transfer ref="addOrTransferRef" @refresh-data-list="getDataList"></add-or-transfer>
        <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="BizCarIndex">
import { useCrud } from '@/hooks'
import {h, reactive, ref} from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import OrgTree from '@/views/sys/user/org-tree.vue'
import constant from '@/utils/constant'
import { ElMessage, UploadProps } from 'element-plus'
import cache from '@/utils/cache'
import AddOrTransfer from '@/views/biz/car/add-or-transfer.vue'
import {createPopup} from "@/utils/gps/createPopup";
import Information from "@/components/information/index.vue";

const state: IHooksOptions = reactive({
  dataListUrl: '/biz/car/page',
  deleteUrl: '/biz/car',
  queryForm: {
    sysOrgId: '',
    // plateNo: '',
    // vinNo: '',
    // engineNo: '',
    // imei: '',
    // driverId: '',
    order: 'create_time',
    asc: false
  }
})

const queryRef = ref()
const addOrUpdateRef = ref()
const addOrTransferRef = ref()
const addOrUpdateHandle = (id?: number) => {
  console.log(id)
  addOrUpdateRef.value.init(id, state.queryForm.sysOrgId)
}
const bulkTransfers = () => {
  addOrTransferRef.value.init()
}
const handleOrgClick = (orgId: any) => {
  state.queryForm.sysOrgId = orgId
  getDataList()
}

const {
  getDataList,
  selectionChangeHandle,
  sizeChangeHandle,
  currentChangeHandle,
  deleteBatchHandle,
  downloadHandle,
  reset
} = useCrud(state)

// 导入用户excel文件
const uploadCarExcelUrl = constant.apiUrl + '/biz/car/importall?access_token=' + cache.getToken()
const downloadExcel = () => {
  downloadHandle('/biz/car/exportall')
}
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  if (file.size / 1024 / 1024 / 1024 / 1024 > 1) {
    ElMessage.error('文件大小不能超过100M')
    return false
  }
  return true
}
//创建弹窗
function openVehicleInfo(imei){
  createPopup({
    default: (close)=> h(Information, {
      imei: imei || undefined,
      onClose: close,
      onGetDataList:getDataList
    })
  }, {
    width: 1000,
    height: 800
  })
}
const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
  if (res.code !== 0) {
    ElMessage.error('上传失败：' + res.msg)
    return false
  }

  ElMessage.success({
    message: '上传成功',
    duration: 500,
    onClose: () => {
      getDataList()
    }
  })
}
</script>
